<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>华猫商城</title>
		<style></style>
		<link href="../css/jquery.validator.css" rel="stylesheet">
		<link href="../css/common.css" rel="stylesheet">

		<link href="../plugin/userLib/css/user.css" rel="stylesheet">
		<link href="../plugin/userLib/css/userinfo.css" rel="stylesheet">
		<link href="../plugin/userLib/css/my_user.css" rel="stylesheet">
		<link href="../css/base.css" rel="stylesheet">
		<link href="../plugin/webuploader/webuploader.css" rel="stylesheet">
		<style>

		</style>
	</head>

	<body>
		<div id="header"></div>
		<div id="headerBox"></div>
		<!--<div id="nav_menu"></div>-->
		<div class="ZZHT-wrap">
			<div class="ZZHT-header" style="border-bottom: 1px solid #ffffff;">
				<div class="ZZHT-shop-nav">
					<div class="ZZHT-nav-box">
						<a href="#">
							<li class="liselect ZZHT-lfloat ZZHT-nav-boxa">用户中心</li>
						</a>
						<div class="ZZHT-clear"></div>
					</div>
				</div>
				<div class="ZZHT-clear"></div>
			</div>
			<div class="ZZHT-main">
				<div id="user_left"></div>
				<div class="ZZHT-content">

					<div class="ZZHT-user-head clearfix">
						<b>修改头像</b>
						<!-- <a href="http://test.izzht.cn/home/users/security.html">返回</a> -->
						<span class="user_bread fr">
	        当前位置：<span>基础资料</span>--<span>修改头像</span>
						</span>
					</div>
					<form id="userEditForm" class="bz nice-validator n-default" autocomplete="off" novalidate="novalidate">
						<div id="tab" class="ZZHT-tab-box">
							<div class="ZZHT-tab-content" style="width:99%;border:none;">
								<div class="ZZHT-tab-item" id="userPhotoDetails" style="display: none;">
									<table class="ZZHT-form uinfo-form">
										<tbody>
											<tr>
												<th>个人头像</th>
												<td colspan="6">
													<div class="modify_userPhoto" id="userPhotoPreview1" style="border:1px solid #e6e6e6;width:61px;height:61px;margin-left:15px;">
														<img class="usersImg" src="../img/dd9a821c0a37c39585863634874d3f6b.png" height="60" width="60">
														<br>
													</div>
													<span id="picErr"></span>
												</td>
											</tr>
										</tbody>
									</table>
								</div>
								<div class="ZZHT-tab-item" id="userPhotoBox" style="">
									<table class="ZZHT-form" id="userPhoto">
										<tbody>
											<tr>
												<th width="100">头像预览
													<font color="red"> </font>：</th>
												<td></td>
											</tr>
											<tr>
												<td></td>
												<td>
													<div id="userPhotoPreview">
														<img class="usersImg" height="70" width="70" style="border-radius: 50%;" src="http://zzhtwl.oss-cn-qingdao.aliyuncs.com/sysconfigs/dd9a821c0a37c39585863634874d3f6b.png" style="display: inline;">
														<br>
													</div>
													<div id="uploadMsg"></div>
												</td>
											</tr>
											<tr>
												<td></td>
												<td width="400">图片大小:70 x 70 (px)，格式为 gif, jpg, jpeg, png</td>
											</tr>
											<tr>
												<td></td>
												<td width="50">
													<input type="hidden" id="userPic" value="" data-target="#picErr" aria-required="true">
													<div id="userPhotoPicker" style="margin-left:0px;margin-top:5px;height:30px;overflow:hidden" class="webuploader-container">
														<div class="webuploader-pick">上传用户头像</div>
														<div id="rt_rt_1cd5a5bum1qealv2869q3mq1" style="position: absolute; top: 0px; left: 0px; width: 120px; height: 44px; overflow: hidden; bottom: auto; right: auto;"><input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*"><label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label></div>
													</div>
												</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</form>

				</div>
			</div>
			<div style="clear:both;"></div>
			<br>
		</div>
		<div id="ck3"></div>
		<script src="../js/jquery.min.js"></script>
		<script src="../plugin/layer/layui.js"></script>
		<script src="../plugin/layer/layer.js"></script>
		<script src="../js/common.js"></script>
		<script src="../js/common_view.js"></script>
		<script src="../js/jquery.validator.js"></script>
		<script src="../js/zh-CN.js"></script>
		<script type="text/javascript" src="../js/ljf_base.js"></script>
		<script src="../plugin/webuploader/webuploader.js"></script>
		<!--<script src="../plugin/userLib/js/user.js"></script>-->

		<script type="text/javascript">
			
			$(function () {
				//获取用户头像
//				$.get('',{userId:localStorage.userId},function(res){
//					
//				});

				$.ajax({//获取用户信息 头像等
					type: "get",
					url: SURL + "users/selectByUsersInfo",
					data: {
						"userId":localStorage.userId,
					},
					dataType: 'json',
					success: function(res) {
						if(res.messageCode==200){
							var img = res.entity.userPhoto;
							if(res.entity.userPhoto.substr(0,4)!='http'){
								img = imgUrl + res.entity.userPhoto;
							}
							$('.usersImg').attr('src',img);
							imgError('../img/dd9a821c0a37c39585863634874d3f6b.png');
						}else{
							layer.msg(res.message);
						}
					}
				});
				
			    $('#userPhotoBox').show();
			    $('#userPhotoDetails').hide();
			    uploadUserPhoto();
			});
			
			function uploadUserPhoto() {
				ZZHT.upload({
					pick: '#userPhotoPicker',
					formData: {
						dir: 'users',
						isWatermark: 1,
						isThumb: 1
					},
					accept: {
						extensions: 'gif,jpg,jpeg,bmp,png',
						mimeTypes: 'image/*'
					},
					compress: {
						width: 383,
						height: 383,
						// 如果发现压缩后文件大小比原来还大，则使用原来图片
						// 此属性可能会影响图片自动纠正功能
						noCompressIfLarger: false,
						// 单位字节，如果图片大小小于此值，不会采用压缩。
						compressSize: 5120
					},
					callback: function(f) {
						console.log(f);
						var json = f.entity;
						/*上传成功*/
						var uploadPhotoSrc = json;
						$('#userPic').val(uploadPhotoSrc);
						$('.usersImg').attr('src',uploadPhotoSrc);
						changePhoto(uploadPhotoSrc);
						$('#uploadMsg').hide();
					},
					progress: function(rate) {
						$('#uploadMsg').show().html('已上传' + rate + "%");
					}
				});
			}
			
			function changePhoto(userPhoto){
				$.get(SURL+'users/update',{"userId":localStorage.userId,"userPhoto":userPhoto},function(res){
					console.log(res);
				});
			}
		</script>
	</body>

</html>